<template>
    <div class="institutions container">
        <div class="header">
            <div class="title fl">
                <img src="../../../assets/images/home.png" alt="">
                事业单位
            </div>
            <div class="more fr link">查看更多
                <i class="el-icon-arrow-right"></i></div>
        </div>
        <div class="ins-main">
            <div class="ads fl">
                <img src="../../../assets/images/左图.png" alt="">
            </div>
            <ul class="info-list fr">
                <li v-for="(item, index) in insList" :key="index+'ins'">
                    <img src="../../../assets/images/common/latest.png" alt="" v-if="index === 0">
                    <div class="address fl"><img src="../../../assets/images/common/positioning_n.png" alt="">{{item.address}}</div>
                    <div class="information fl">
                        <div class="title">{{item.content}}</div>
                        <div class="others">
                            <i class="el-icon-user-solid"></i>
                            <span class="person-num">{{item.personNum}}</span>
                            <span class="mar">人</span>
                            <i class="el-icon-timer"></i>
                            <span>{{item.update}}</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "InstitutionsBlock",
        data() {
            return {
                insList: [
                    {
                        address: '福州',
                        content: '2019年福州市福建教育学院招聘公告公告公告公告',
                        personNum: '2',
                        update: '04-23'
                    },{
                        address: '福州',
                        content: '2019年福州市福建教育学院招聘公告公告公告公告',
                        personNum: '2',
                        update: '04-23'
                    },{
                        address: '福州',
                        content: '2019年福州市福建教育学院招聘公告公告公告公告',
                        personNum: '2',
                        update: '04-23'
                    },{
                        address: '福州',
                        content: '2019年福州市福建教育学院招聘公告公告公告公告',
                        personNum: '2',
                        update: '04-23'
                    }
                ]
            }
        }
    }
</script>

<style scoped lang="less">
    .institutions {
        background: #F7F8FA;
        margin-top: 36px;
        overflow: hidden;
        .header {
            height: 42px;
            line-height: 42px;
            background: #FFFFFF;
            padding: 0 18px 0 30px;
            overflow: hidden;
            .title {
                padding-left: 26px;
                position: relative;
                img {
                    position: absolute;
                    top: 10px;
                    left: 0;
                }
            }
            .more {
                color: #57ACF3;
            }
        }
        .ins-main {
            margin-top: 14px;
            .ads {
                width: 595px;
                height: 395px;
                background: #5877FC;
            }
            .info-list {
                width: 592px;
                height: 397px;
                display: flex;
                align-content: space-between;
                justify-content: space-between;
                flex-direction: column;
                li {
                    width: 592px;
                    height: 92px;
                    background: #FFFFFF;
                    position: relative;
                    img {
                        position:absolute;
                        left: 0;
                        top: 0;
                    }
                    .address {
                        width: 90px;
                        text-align: center;
                        line-height: 92px;
                        font-size: 15px;
                        color: #2594EF;
                        position: relative;
                        padding-top: 11px;
                        img {
                            position: absolute;
                            top: 28px;
                            left: 35px;
                        }
                    }
                    .information {
                        width: 456px;
                        padding: 20px 0;
                        .title {
                            font-size: 20px;
                            color: #333333;
                            white-space:nowrap;
                            overflow:hidden;
                            text-overflow:ellipsis;
                        }
                        .others {
                            text-align: left;
                            font-size: 14px;
                            color: #999999;
                            margin: 9px 0 0 5px;
                            .person-num {
                                font-weight: bold;
                                color: #FF0000;
                            }
                            .mar {
                                margin-right: 28px;
                            }
                        }
                    }
                }
            }
        }
    }

</style>